<template>
  <div id="prizeLssueDetail">
    <h1 class="con-right-title">
      奖励发放明细
    </h1>
    <!-- 搜索 -->
    <top-search @toSearch="toSearch"></top-search>
    <!-- 顶部 -->
    <div class="table-conBtn">
      <el-button type="warning" @click="exportFile">
        导出
        <i class="el-icon-download el-icon--right"></i>
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
      <!-- 合计 -->
      <div class="total">
        <h2 class="total-item">合计发放:{{ prizeAmount.amount }} 元</h2>
        <h2 class="total-item">未到账:{{ prizeAmount.notGrantAmount }} 元</h2>
        <h2 class="total-item">已到账:{{ prizeAmount.grantAmount }} 元</h2>
      </div>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="A学员大鹏号" min-width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.user.dpAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="收益类型"
        prop="incomeLevel"
        min-width="100"
        align="center"
        :formatter="levelFormatter"
      >
      </el-table-column>
      <el-table-column label="被推荐人大鹏号" min-width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userBe.dpAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发放金额（元）"
        prop="amount"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="A学员合伙人身份等级"
        prop="grade"
        min-width="100"
        align="center"
        :formatter="gradeFormatter"
      >
      </el-table-column>
      <el-table-column
        label="A学员状态"
        prop="studyStatus"
        min-width="100"
        align="center"
        :formatter="studyStatusFormatter"
      >
      </el-table-column>
      <el-table-column
        label="奖励发放状态"
        prop="grantStatus"
        min-width="100"
        align="center"
        :formatter="grantStatusFormatter"
      >
      </el-table-column>
      <el-table-column
        label="被推荐人报名时间"
        prop="inTime"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="奖励到账时间" min-width="120" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.grantStatus === 'STOP'">——</span>
          <span v-else>{{ row.rewardTime || '——' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import topSearch from './topSearch'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { formatterValueByDict } from '@utils/table'
import { getAwardList, getAmount, exportAward } from '@/api/partner/award'
export default {
  components: {
    topSearch
  },
  /* filters: {
    filterGrade(value, that) {
      for (let i = 0; i < that.grade.length; i++) {
        const item = that.grade[i]
        if (value === item.dictValue) {
          return item.dictLabel
        }
      }
    }
  }, */
  data() {
    return {
      loading: true,
      // that: this,
      incomeLevel: [],
      grade: [],
      studentState: [],
      grantState: [],
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      prizeAmount: {}
    }
  },
  mounted() {
    this.searchList()
    this.getStatusList()
  },
  methods: {
    /* 获取字典 */
    async getStatusList() {
      this.incomeLevel = await sysNormalDisable('partner_award_income_level') //收益类型
      this.grade = await sysNormalDisable('partner_award_grade') //学员等级
      this.studentState = await sysNormalDisable('partner_award_study_status') //学员状态
      this.grantState = await sysNormalDisable('partner_award_grant_status') //发放状态
    },
    searchList() {
      this.loading = true
      getAwardList(
        this.searchParams,
        (res) => {
          this.loading = false
          this.tableData = res.rows
          this.total = res.total
        },
        (err) => {
          this.$message.error('活动消息列表查询失败')
          this.loading = false
        }
      )
      const obj = Object.assign({}, this.searchParams)
      delete obj.pageNum
      delete obj.pageSize
      getAmount(obj, (res) => {
        this.prizeAmount = res
      })
    },
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 导出 */
    exportFile() {
      this.$confirm('确定导出奖品发放明细吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let params = Object.assign({}, this.searchParams)
          let url = exportAward(params)
          this.downFile('get', url, params, '奖品发放明细')
        })
        .catch(() => {})
    },
    /* 格式化列表 */
    gradeFormatter(row, _column, cellValue) {
      return formatterValueByDict({
        cellValue,
        condition: cellValue,
        options: this.grade
      })
    },
    levelFormatter(row, _column, cellValue) {
      return formatterValueByDict({
        cellValue,
        condition: cellValue,
        options: this.incomeLevel
      })
    },
    studyStatusFormatter(row, _column, cellValue) {
      return formatterValueByDict({
        cellValue,
        condition: cellValue,
        options: this.studentState
      })
    },
    grantStatusFormatter(row, _column, cellValue) {
      return formatterValueByDict({
        cellValue,
        condition: cellValue,
        options: this.grantState
      })
    }
  }
}
</script>
<style lang="less" scoped>
.total {
  display: flex;
  margin-top: 10px;
  .total-item {
    margin-right: 30px;
  }
}
</style>
